<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" xmlns="http://www.w3.org/1999/xhtml"
                                     xmlns:th="http://www.thymeleaf.org"><!--<![endif]-->
<head>

    <!-- Basic Page Needs
    ================================================== -->
    <meta charset="utf-8"/>
    <title>萌宠网</title>

    <!-- Mobile Specific Metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    <!-- CSS
    ================================================== -->
    <link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" href="css/colors/green.css" th:href="@{/css/colors/green.css}" id="colors"/>

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body class="boxed">
<div id="wrapper">


    <!-- Header
        ================================================== -->
    <div th:replace="fragments/header :: header"></div>


    <!-- Slider
    ================================================== -->
    <div class="container fullwidth-element home-slider">

        <div class="tp-banner-container">
            <div class="tp-banner">
                <ul>
                    <!-- Slide 1  -->
                    <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
                        <img src="images/ad/ad-1.jpg"  th:src="@{/images/ad/ad_1.jpg}" alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" />
                        <div class="caption sfb fadeout" data-x="145" data-y="170" data-speed="400" data-start="800"  data-easing="Power4.easeOut">
                            <h2></h2>
                            <h3>萌宠网</h3>
                            <a th:href="@{/items}" class="caption-btn">Shop it now</a>
                        </div>
                    </li>

                    <!-- Slide 2  -->
                    <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000">
                        <img src="images/ad/ad_2.png"  th:src="@{/images/ad/ad_2.png}" alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" />
                        <div class="caption dark sfb fadeout" data-x="750" data-y="170" data-speed="400" data-start="800"  data-easing="Power4.easeOut">
                            <h2></h2>
                            <h3>萌宠网</h3>
                            <a th:href="@{/items}" class="caption-btn">Shop it now</a>
                        </div>
                    </li>

                    <!-- Slide 3  -->
                    <li data-transition="fadetotopfadefrombottom" data-slotamount="7" data-masterspeed="1000">
                        <img src="images/ad/ad_3.jpg"  th:src="@{/images/ad/ad_3.jpg}" alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" />
                        <div class="caption dark sfb fadeout" data-x="850" data-y="170" data-speed="400" data-start="800"  data-easing="Power4.easeOut">
                            <h2></h2>
                            <h3>萌宠网</h3>
                            <a th:href="@{/items}" class="caption-btn">Shop it now</a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <div class="margin-top-50"></div>

    <!-- Footer
    ================================================== -->
    <div th:replace="fragments/footer :: footer"></div>

</div>


<!-- Java Script
================================================== -->
<div th:replace="fragments/scripts :: scripts"></div>


<!-- Style Switcher
================================================== -->
<div th:replace="fragments/styleswitcher :: styleswitcher"></div>


</body>
</html>
